<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head>
<title>Blue Moon - Responsive Admin Dashboard</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
	content="Blue Moon - Responsive Admin Dashboard" />
<meta name="keywords"
	content="Notifications, Admin, Dashboard, Bootstrap3, Sass, transform, CSS3, HTML5, Web design, UI Design, Responsive Dashboard, Responsive Admin, Admin Theme, Best Admin UI, Bootstrap Theme, Wrapbootstrap, Bootstrap, bootstrap.gallery" />
<meta name="author" content="Bootstrap Gallery" />
<link rel="shortcut icon" href="img/favicon.ico">

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/new.css" rel="stylesheet">
<link href="css/new2.css" rel="stylesheet">

<!-- Important. For Theming change primary-color variable in main.css  -->

<link href="fonts/font-awesome.min.css" rel="stylesheet">

<!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
<!--CSACASDAAAAAAAAAAA-->

<script src="layer/jquery.min.js"></script>
<script src="layer/layer.js"></script>
<link href="layer/bootstrap.css">

<!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>

	<!-- Header Start -->
	<header>
		<div th:include="common/header :: header"></div>
	</header>
	<!-- Header End -->

	<!-- Main Container start -->
	<div class="dashboard-container">

		<div class="container">
			<!-- 嵌入顶部导航栏 -->
			<div th:replace="common/topnav :: topnav"></div>

			<!-- 地址 -->
			<!-- 嵌入时间显示片段 -->
			<div th:replace="common/time :: time"></div>
			<form action="" name="bespoke-form">


				<!-- Dashboard Wrapper Start -->
				<div class="dashboard-wrapper">
					<!-- Row Start -->
					<div class="row">
						<div class="col-lg-12 col-md-12">
							<div class="widget">
								<div class="widget-body">
									<div id="dt_example1" class="example_alt_pagination">
										<div class="row">
											<div class="col-xs-6">
												项目&nbsp;<select style="width: 80%; height: 30px"
													id="projectSelect">
													<option>翡翠绿洲一期</option>
													<option>2</option>
													<option>3</option>
													<option>4</option>
													<option>5</option>
												</select>
											</div>
											<div class="col-xs-6">
												视图 &nbsp; <select style="width: 80%; height: 30px">
													<option>已排号的预约单列表</option>
												</select>
											</div>
										</div>
									</div>
								</div>
								<div class="widget-header" id="sda">
									<div style="height: 10px;">
										<strong>快速查询</strong>
									</div>
								</div>
								<div class="widget-body">
									<div id="dt_example" class="example_alt_pagination">
										<div class="row">
											<div class="col-xs-5">
												查找按&nbsp;&nbsp;<select style="width: 80%; height: 30px">
													<option>房间</option>
													<option>2</option>
													<option>3</option>
													<option>4</option>
													<option>5</option>
												</select>
											</div>
											<div class="col-xs-5">
												关键字 &nbsp; <input type="text" style="width: 60%; height: 30px" name="keyword">
											</div>
											<div class="col-xs-2">
												<button type="button" class="btn btn-primary"
													style="height: 30px; width: 80%; padding: 0px" id="reservationButton">查找</button>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

					<div class="row">
						<div class="col-lg-12 col-md-12">
							<div class="widget">
								<div class="widget-header">
									<div class="title">
										已排号的预约单列表<a id=""></a>
									</div>
									<div style="float: right">
										<span style="font-weight: bold"><a id="parentIframe">新增</a>
										</span>
									</div>
								</div>
								<div class="widget-body" style="padding: 0px">
									<div class="example_alt_pagination">
										<table width=""
											class="table table-condensed table-striped table-hover table-bordered pull-left"
											id="data-table">
											<thead>
												<tr>
													<th>序号</th>
													<th>客户名称</th>
													<th>预约日期</th>
													<th style="" class="hidden-phone">失效日期</th>
													<th style="" class="hidden-phone">房间</th>
													<th style="" class="hidden-phone">房间排号</th>
													<th style="" class="hidden-phone">项目排号</th>
													<th style="width: 10%" class="hidden-phone">应收预约金</th>
													<th style="" class="hidden-phone">币种</th>
													<th style="" class="hidden-phone">业务员</th>
												</tr>
											</thead>
											<tbody id="bespokeTbody">
											</tbody>
										</table>
										<div class="clearfix"></div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</form>
			<!-- Dashboard Wrapper End -->

			<footer>
				<p>© BlueMoon 2013-14</p>
			</footer>

		</div>
	</div>

	<!-- Main Container end -->

	<script src="js/wysi/wysihtml5-0.3.0.min.js"></script>
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/wysi/bootstrap3-wysihtml5.js"></script>
	<script src="js/jquery.scrollUp.js"></script>


	<!-- Color Picker -->
	<script src="js/color-picker/jquery.minicolors.js"></script>

	<!-- Custom JS -->
	<script src="js/menu.js"></script>
	<!-- Custom JS -->
	<script src="js/menu.js"></script>

	<script type="text/javascript">
		/* 
		 * formatMoney(s,type) 
		 * 功能：金额按千位逗号分割 
		 * 参数：s，需要格式化的金额数值. 
		 * 参数：type,判断格式化后的金额是否需要小数位. 
		 * 返回：返回格式化后的数值字符串. 
		 */
		function formatMoney(s, type) {
			if (/[^0-9\.]/.test(s))
				return "0";
			if (s == null || s == "")
				return "0";
			s = s.toString().replace(/^(\d*)$/, "$1.");
			s = (s + "00").replace(/(\d*\.\d\d)\d*/, "$1");
			s = s.replace(".", ",");
			var re = /(\d)(\d{3},)/;
			while (re.test(s))
				s = s.replace(re, "$1,$2");
			s = s.replace(/,(\d\d)$/, ".$1");
			if (type == 0) {// 不带小数位(默认是有小数位)  
				var a = s.split(".");
				if (a[1] == "00") {
					s = a[0];
				}
			}
			return s;
		}
			
		//ScrollUp
		function ajax(projectId,keyword){
			$.ajax({
				type : "POST",
	 			url : "/reservationNumber",
	  			data : {projectId:projectId,keyword:keyword},
	 			contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
	 			dataType : "json",
	 			success : function(data) {
	 				//查询全部项目信息，加载到下拉列表
	 				$("#projectSelect").html("");
	 				$("#projectSelect").append("<option value='0'>全部</option>");
	 				for(var i=0;i<data.projects.length;i++){
	 					if(data.projectId==data.projects[i].projectId){
	 						$("#projectSelect").append("<option value='"+data.projects[i].projectId+"' selected>"+data.projects[i].projectName+"</option>");
	 					}else{
	 						$("#projectSelect").append("<option value='"+data.projects[i].projectId+"'>"+data.projects[i].projectName+"</option>");
	 					}
	 					
	 				}
	 				//页面加载进入ajax，查询预约信息
	 				$("#bespokeTbody").html("");
	 				for(var i=0;i<data.bespokes.length;i++){
	 					$("#bespokeTbody").append("<tr class='gradeX warning'>"+
							 							"<td><input type='checkbox' value='"+data.bespokes[i].besId+"' />"+(i+1)+"</td>"+
														"<td>"+data.bespokes[i].cusName+"</td>"+
														"<td>"+data.bespokes[i].besDate+"</td>"+
														"<td class='hidden-phone'>"+data.bespokes[i].besExpirationDate+"</td>"+
														"<td class='hidden-phone'>"+data.bespokes[i].projectName+"-"+data.bespokes[i].detAbbreviation+"-"+data.bespokes[i].banName+"-"+data.bespokes[i].roomNumber+"</td>"+
														"<td class='hidden-phone'>"+data.bespokes[i].besRoom+"</td>"+
														"<td class='hidden-phone'>"+data.bespokes[i].besProject+"</td>"+
														"<td class='hidden-phone besReceivables'>"+formatMoney(data.bespokes[i].besReceivables)+"</td>"+
														"<td class='hidden-phone'>"+data.bespokes[i].besCurrency+"</td>"+
														"<td class='hidden-phone'>"+data.bespokes[i].userName+"</td>"+
	 											   "</tr>");
	 				}
	 			}
			});
		}
		
		
		$(function() {
			ajax(0);//调用ajax方法
			
			$.scrollUp({
				scrollName : 'scrollUp', // Element ID
				topDistance : '300', // Distance from top before showing element (px)
				topSpeed : 300, // Speed back to top (ms)
				animation : 'fade', // Fade, slide, none
				animationInSpeed : 400, // Animation in speed (ms)
				animationOutSpeed : 400, // Animation out speed (ms)
				scrollText : 'Top', // Text for element
				activeOverlay : false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
			});
			
			//下拉列表改变事件
			$("#projectSelect").on("change",function(){
				var projectId=$(this).val();
				$("input[name=keyword]").val("");
				ajax(projectId,null);
			});
			
			//查询按钮点击事件
			$("#reservationButton").on("click",function(){
				var projectId=$("#projectSelect").val();
				var keyword=$("input[name=keyword]").val();
				ajax(projectId,keyword);
			});
			
		});
		//Tooltip
		$('a').tooltip('hide');

		//Popover
		$('.popover-pop').popover('hide');

		//Dropdown
		$('.dropdown-toggle').dropdown();
	</script>

	<script>
		$('#parentIframe').on('click', function() {
			layer.open({
				type : 2,
				skin : 'layui-layer-lan',
				title : '选择机会',
				fix : false,
				shadeClose : true,
				maxmin : true,
				area : [ '1200px', '770px' ],
				content : '/customerList',
			});
		});
	</script>


</body>
</html>